<template>
  <a-layout-header style="background: #fff; padding: 0">
    <menu-unfold-outlined v-if="collapsed" class="trigger" @click="toggleCollapsed" />
    <menu-fold-outlined v-else class="trigger" @click="toggleCollapsed" />
    <div style="float: right">欢迎使用管理控台</div>
  </a-layout-header>
</template>
<script setup lang="ts">
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
const props = withDefaults(
  defineProps<{
    collapsed: boolean;
  }>(),
  {
    collapsed: false,
  }
);

const emit = defineEmits(['update:collapsed']);
const toggleCollapsed = (): void => {
  emit('update:collapsed', !props.collapsed);
};
</script>

<style scoped lang="less">
.wrapper {
}
</style>
